<template>
  <div>
    <h3>这是第十六个demo:props和父子组件通信</h3>
    <!-- <p>{{ x }}--{{ y }}--{{ z }}</p> -->
     <!-- <p>{{ x }}</p> -->
    <ul>
      <li v-for="(item) in list1":key="item.id">
        {{ item.id }}--{{ item.name }}--{{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script setup lang='ts' name="Demo16">
import { ref, reactive } from 'vue'
import { type PersonList } from '@/types/demo16'



// 1.只是单纯的接收
// defineProps(['x','y','z','list1'])


// 2.限制类型
// defineProps<{list1:PersonList,x:string}>();

// let msg = defineProps<{list1:PersonList,x:string,y:string,z:string}>()
// console.log(msg)
// console.log(msg.list1)


// 3.限制类型 + 限制必传 + 默认值
//?表示选传
withDefaults(defineProps<{list1?:PersonList,x?:string,y:string,z:string}>(),{
  list1:()=>[{id:333,name:"唐僧",age:30}],
  x:"www",
})
// list1: function() {
//   return [{id: 333, name: "唐僧", age: 30}];
// }



let list: PersonList = [
  {
    id: 1,
    name: "孙悟空",
    age: 500
  },
  {
    id: 2,
    name: "悟空孙",
    age: 500
  },
  {
    id: 3,
    name: "空孙悟",
    age: 500
  },
]

</script>


<style lang='scss' scoped></style>